<template>
    <footer>
      <div>
        <router-link active-class="active" to="/home"
          ><i class="iconfont icon-shouye"></i>
          <div class="text">首页</div></router-link
        >
      </div>
      <div>
        <router-link active-class="active" to="/classify"
          ><i class="iconfont icon-fenlei"></i>
          <div class="text">分类</div></router-link
        >
      </div>
      <div>
        <router-link active-class="active" to="/course"
          ><i class="iconfont icon-ketang"></i>
          <div class="text">课程</div></router-link
        >
      </div>
      <div>
        <router-link active-class="active" to="/person"
          ><i class="iconfont icon-wode"></i>
          <div class="text">我的</div></router-link
        >
      </div>
    </footer>
</template>

<style lang="scss">
footer{
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 50px;
        background-color: white;
        display: flex;
        text-align: center;
        justify-content: space-between;
        a{
            display: block;
            width: 80px;
            height: 50px;
            display: flex;
            flex: 1 0 20%;
            flex-direction: column;
            i{
                height: 30px;
                display: block;
                font-size: 30px;
                line-height: 30px;
                
            }
            .text{
              height: 20px;
              line-height: 20px;
              font-size: 12px;
            }

        }
        .active i{
          color: red;
        }

    }
</style>